import React from "react"
import styles from './index.module.less'
import { Button, Checkbox, Form, Input } from "antd";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "@/hooks/redux.hooks";
import { useRequest } from "ahooks";
import { getRequestCgi } from "@/request";
const login: React.FC = () => {
    // 编码
    console.log(window.btoa(window.encodeURIComponent('元素')), '--------------------'); // JUU1JTg1JTgzJUU3JUI0JUEw
    // 解码
    console.log(window.decodeURIComponent(window.atob('JUU1JTg1JTgzJUU3JUI0JUEw')));
    const dispatch = useAppDispatch()
    const navigate = useNavigate()
    const [form] = Form.useForm()
    const { run } = useRequest(() => {
        return getRequestCgi('/api/login')
    }, {
        manual: true,
        onSuccess:(res) => {
            navigate('/home', { state: { userInfo: res } })
        }
    })
    const handleFinish = (values) => {
        const { username, password, remember } = values
        document.cookie = `token=${new Date().getTime()}`
        navigate('/card', { state: { userInfo: { username, password, remember } } })
    };
    const backfillValue = () => {
        form.setFieldsValue({ username: '回填username', password: '回填password', remember: true })
    }
//     const p1 = Promise.resolve(1)
//     const p2 = Promise.resolve(1)
//     // const p3 = Promise.reject(0)
//     const p4 = Promise.resolve(1)
//     // 全成功为resolve 一个失败为reject
//     // const all = Promise.all([p1, p2, p3]) // 三个promise 两个resolve 一个reject 返回rejct 
//     const all = Promise.all([p1, p2, p4]) // 三个promise 都是resolve 返回resolve
//     // console.log(all);
//     const p5 = new Promise(resove => setTimeout(() => resove(5), 500))
//     const p6 = new Promise((resove, reject) => setTimeout(() => reject(6), 500))
//     // 不去分resove、reject 看哪个最快有结果
//     const race = Promise.race([p5, p6])
//     console.log(race);
//     // 不区分成功返回还是是失败返回 结果统一放到数组中
//     const allSettled = Promise.allSettled([p1, p2, p4, p5, p6])
//     console.log(allSettled);

//     // 定义类
//   class Person {
//     // 定义属性 约等于 定义 ts
//     name: string
//     age: number
//     sex: string
//     constructor(name, age, sex) {
//       this.name = name
//       this.age = age
//       this.sex = sex
//       console.log(this,'this');
//     }
//     showPerson () {
//       console.log(`姓名：${this.name} 性别：${this.sex} 年龄：${this.age}`);
//     }
//   }
//   const person = new Person('Tom', 18, '男')
//   // 类属性只有实例化之后才可以访问 并且父类不可以访问子类的属性
//   person.showPerson()
  
  // 两个写法
  // class Son extends Person {
  //   address = '北京';
  //   constructor() {
  //     super('Tom', 18, '男')
  //   }
  // }
  // const son = new Son()
  // 子类可以使用父类属性
//   class Son extends Person {
//     address = '北京';
//   }
//   const son = new Son('Tom', 18, '男')
//   console.log(son, 'son');
    return (
        <div className={styles.login}>
            <Form form={form} onFinish={handleFinish}>
                {/* <Form.Item label={'hooks'}> */}
                {/* </Form.Item> */}
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your username!',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Password"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item name="remember" valuePropName="checked" label={null}>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        {'登陆'}
                    </Button>
                </Form.Item>

            </Form>
            <Button type="primary" onClick={backfillValue}>
                Backfill
            </Button>
        </div>
    )
}

export default login